<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贝塞尔曲线</title>
  <style>
    canvas{
      border: 1px solid gray;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="800">您的浏览器不支持Canvas！</canvas>
</body>
<script>
  const canvas = document.getElementById("canvas");
  // 获取上下文以及绘画功能
  const ctx = canvas.getContext("2d");
  // 二次贝塞尔曲线
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.quadraticCurveTo(70, 25, 90, 75);
  ctx.stroke();

  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.moveTo(70, 70);
  ctx.quadraticCurveTo(90, 45, 110, 95);
  ctx.fill();

  // 三次贝塞尔曲线
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(300, 110);
  ctx.bezierCurveTo(320, 90, 340, 80, 350, 130);
  ctx.stroke();

  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.moveTo(210, 120);
  ctx.bezierCurveTo(230, 100, 250, 90, 260, 140);
  ctx.fill();

  // 绘制心形
  ctx.beginPath();
  ctx.moveTo(75, 40);
  ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
  ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
  ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
  ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
  ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
  ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
  ctx.fill();
</script>
</html>